<template>
    <swiper
        :id="id"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :current="current"
        :interval="interval"
        :duration="duration"
        :circular="circular"
        :style="{ borderRadius: radius }"
        class="swiper"
        @change="change"
        @transition="transition"
        @animationfinish="animationfinish"
    >
        <swiper-item v-for="(item, index) in images" :key="index" :style="{ borderRadius: radius }">
            <image v-if="Object.prototype.toString.call(item) == '[object String]'" :src="item" mode="aspectFill"></image>
            <image v-else :src="item.image_src" mode="aspectFill" :style="{ borderRadius: radius }"></image>
        </swiper-item>
    </swiper>
</template>

<script setup lang="ts">
import { getNodeInfo } from "@/utils";
import { computed } from "vue";
import { getCurrentInstance } from "vue";
import { nextTick, onMounted, ref } from "vue";

interface swiperProp {
    modelValue?: string | any[];
    id?: string;
    indicatorDots?: boolean;
    autoplay?: boolean;
    current?: number;
    interval?: number;
    duration?: number;
    circular?: boolean;
    width?: string | number;
    height?: string | number;
    ratio?: number; // 宽高比率（高/宽）
    imgKey?: string;
    radius?: string;
}

const props = withDefaults(defineProps<swiperProp>(), {
    modelValue: "",
    id: "banner",
    indicatorDots: false,
    autoplay: true,
    current: 0,
    interval: 3000,
    duration: 1000,
    circular: true,
    width: "100%",
    ratio: 0.5,
    imgKey: "",
    radius: ""
});

const emit = defineEmits(["change", "transition", "animationfinish"]);

const images = computed(() => {
    if (!props.modelValue) {
        return [];
    }
    if (Array.isArray(props.modelValue)) {
        return props.modelValue;
    } else {
        return props.modelValue.split(",");
    }
});

// swiper宽
const swiperWidth = ref<string>();
if (typeof props.width === "string") {
    swiperWidth.value = props.width || "100%";
} else {
    swiperWidth.value = props.width + "rpx";
}
// swiper高
const swiperHeight = ref<string>("100%");

const change = (e: any) => {
    emit("change", e);
};
const transition = (e: any) => {
    emit("transition", e);
};
const animationfinish = (e: any) => {
    emit("animationfinish", e);
};

const instance = getCurrentInstance();
onMounted(() => {
    nextTick(async () => {
        if (!props.height && props.ratio && props.ratio > 0) {
            const node: UniApp.NodeInfo = await getNodeInfo(uni.createSelectorQuery().in(instance), `#${props.id}`);
            if (node.width) {
                swiperHeight.value = node.width * props.ratio + "px";
            }
        } else {
            if (typeof props.height === "string") {
                swiperHeight.value = props.height || "100%";
            } else {
                swiperHeight.value = props.height + "rpx";
            }
        }
    });
});
</script>

<style scoped lang="scss">
.swiper {
    width: v-bind(swiperWidth);
    height: v-bind(swiperHeight);
    image {
        width: 100%;
        height: 100%;
    }
}
</style>
